<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 头部 复用组件
        is-root用来标记跟组件
        -->
        <tree-tools :node-data="company" :is-root="true" @add-dept="handleAddDept" />

        <!-- 树形结构 -->
        <!--
            el-tree 默认插槽 自定义内容
              作用域插槽提供的
                node - 用的不多 这个打印还会报错
                data - 主要data用的多 当前节点的数据(departs中的每个对象)
          注意：
               默认插槽 就不用写#default
               但如果用到作用插槽 #default="{xxx}"  //解构
         -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <template #default="{data}">
            <!--复用组件 父传子传值 -->
            <tree-tools
              :node-data="data"
              @del-depts="getDepartment"
              @add-dept="handleAddDept"
              @edit-dept="handleEditDept"
            />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 增加dialog框，封装组件，便于复用
   注意：为了dialog能够获取到id， 通过父传子传给dialog框组件
    -->
    <add-dept
      ref="addDeptDialog"
      :node-data="nodeData"
      :depts="depts"
      :show-dialog.sync="showDialog"
      @add-depts="getDepartment"
    />
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { reqGetDepartment } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import AddDept from './components/add-dept.vue'
export default {
  // data() {
  //   return {
  //     // 映射
  //     defaultProps: {
  //       label: 'name',
  //       children: 'child'
  //     },
  //     data: [
  //       {
  //         name: '班级',
  //         child: [
  //           {
  //             name: '组长',
  //             child: [
  //               { name: '电脑' },
  //               { name: '电脑1' },
  //               { name: '电脑2' }
  //             ]
  //           },
  //           { name: '组员' }
  //         ]
  //       }
  //     ]
  //   }
  // }
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      loading: false,
      showDialog: false, // 显示dialog组件
      nodeData: {}, // 定义每行节点的变量,需要通过父传子传给dialog框组件
      depts: [], // 所有组织架构列表，用来自定义校验判断
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created() {
    // 调用封装的列表渲染函数
    this.getDepartment()
  },
  methods: {
    // 封装列表请求
    async  getDepartment() {
      // 发请求之前，打开loading效果
      this.loading = true
      const { data: { companyName, depts }} = await reqGetDepartment()
      // console.log(JSON.parse(JSON.stringify(depts))) // 这里用json字符串，让打印的数据展开
      // 将数据列表转成树状列表（封装）,调用
      /**
       * pid "" 空的话 获取的是一级部门
       * pid  "1175311325720936448"  （财务部id） 获取的财务部的子部门
       */
      const tree = tranListToTreeData(depts, '')
      // console.log(tree)
      // 赋值
      this.company = {
        name: companyName,
        manager: '负责人',
        // 给公司添加子部门时，需要添加这个id为'',因为，一级部门的pid为'',所以这里的id设置为''
        id: ''
      }
      this.departs = tree
      // 在data中声明变量depts，方便传值
      this.depts = depts
      // 请求结束后，关闭loading效果
      this.loading = false
    },
    // 关闭dialog弹框,改用.sync修饰符
    // dialogClose(flag) {
    //   this.showDialog = flag
    // },
    // 点击增加显示弹框
    handleAddDept(nodeData) {
      this.showDialog = true
      // console.log('子组件传过来的每行节点', nodeData)
      this.nodeData = nodeData
    },
    // 点击编辑显示弹框
    handleEditDept(nodeData) {
      this.showDialog = true
      // 子组件传过来的每行节点
      this.nodeData = nodeData
      // 因为需要获取员工最新列表，需要调用获取员工的方法
      this.$refs.addDeptDialog.getEmployeeSimple()
      // 调用子组件回显的方法,将每个数据id传过去
      this.$refs.addDeptDialog.getEditDetail(nodeData.id)
      // this.$nextTick(() => {
      //   // 使dom更新后调用此方法，才能拿到值
      //   this.$refs.addDeptDialog.getEditDetail()
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.tree-card {
  padding: 30px 30px;
  font-size:14px;
}
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
